<template>
    <view>
        <view class="uni-padding-wrap uni-common-mt">
            <form @submit="formSubmit" @reset="formReset">
                <view class="uni-list">
                    <view class="uni-list-cell">
                        <view class="uni-list-cell-left">
                            国家：
                        </view>
                        <view class="uni-list-cell-db">
                            <picker @change="bindPickerChange" :value="index" :range="array">
                                <view class="uni-input">{{array[index]}}</view>
                            </picker>
                        </view>
                    </view>
                    <view class="uni-list-cell">
                        <view class="uni-list-cell-left">
                            代码：
                        </view>
                        <view class="uni-list-cell-db">
                            <picker @change="bindPickerChange" :value="index1" :range="array">
                                <view class="uni-input">{{array[index1]}}</view>
                            </picker>
                        </view>
                    </view>
                    <view class="uni-list-cell">
                        <view class="uni-list-cell-left">
                            日期：
                        </view>
                        <view class="uni-list-cell-db">
                            <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
                                <view class="uni-input">{{date}}</view>
                            </picker>
                        </view>
                    </view>
                    <view class="uni-list-cell">
                        <view class="uni-form-item">
                            <view class="title">Mac:</view>
                            <input class="uni-input" name="input" placeholder="这是一个输入框"/>
                        </view>
                    </view>
                    <view class="uni-form-item uni-textarea">
                        <view class="title">备注:</view>
                        <textarea class="uni-input" @blur="bindTextAreaBlur" auto-height />
                    </view>
                </view>
                <view class="uni-btn-v">
                    <button formType="submit" type="primary">提交</button>
                    <button type="default" formType="reset">重置</button>
                </view>
            </form>
        </view>
    </view>
</template>
<script>
    export default{
        data() {
            const currentDate = this.getDate({
                format: true
            })
            return {
                pickerHidden: true,
                chosen: '',
                index:1,
                index1:0,
                array: ['中国', '美国', '巴西', '日本'],
                date: currentDate,
            }
        },
        computed: {
            startDate() {
                return this.getDate('start');
            },
            endDate() {
                return this.getDate('end');
            }
        },
        methods: {
            bindPickerChange: function(e) {
                console.log('picker发送选择改变，携带值为', e.target.value)
                this.index = e.target.value
            },
            bindDateChange: function(e) {
                this.date = e.target.value
            },
            bindTextAreaBlur: function (e) {
                console.log(e.detail.value)
            },
            pickerConfirm: function(e) {
                this.pickerHidden = true
                this.chosen = e.target.value
            },
            pickerCancel: function(e) {
                this.pickerHidden = true
            },
            pickerShow: function(e) {
                this.pickerHidden = false
            },
            formSubmit: function(e) {
                console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
            },
            formReset: function(e) {
                console.log('清空数据')
                this.chosen = ''
            },
            getDate(type) {
                const date = new Date();
                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                let day = date.getDate();

                if (type === 'start') {
                    year = year - 60;
                } else if (type === 'end') {
                    year = year + 2;
                }
                month = month > 9 ? month : '0' + month;;
                day = day > 9 ? day : '0' + day;
                return `${year}-${month}-${day}`;
            }
        }
    }
</script>
